<!DOCTYPE html>
<html  lang="en">
    <head>
        <title>Document</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
        <style>
            @keyframes move-in {
                0% {
                    opacity: 0;
                    transform: translateX(100px);
                }
                100% {
                    opacity: 1;
                    transform: translateX(0px);
                }
            }
            .move-enter-active {
                /* animation: name duration timing-function delay iteration-count direction fill-mode; */
                animation: move-in 1.5s;
            }
            .move-leave-active {
                animation: move-in 1.5s reverse;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="mytext">
            <button @click="add()">
                add
            </button>

        <transition-group tag="ul" name="move">
                <li v-for="item,index in list" :key="item">

                    {{ item }}

                    <button @click="del(index)">
                        del
                    </button>
                </li>
            </transition-group>
        </div>

        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    mytext: '',
                    list: [],
                    isIn: true
                },
                methods: {
                    add(){
                        this.list.push(this.mytext)
                        this.mytext = ''
                        this.isIn = true
                    },
                    del(index){
                        this.isIn = false
                        this.list.splice(index,1)
                    }
                }
            })
        </script>
    </body>
</html>